<%--
  Created by IntelliJ IDEA.
  User: hct
  Date: 2024/6/6
  Time: 9:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>存储列表展示</title>
    <script src="${pageContext.request.contextPath}/js/jquery.js"></script>
</head>
<style>
    table{
        width: 100%;
    }

    th{
        text-align: center;
        background-color: deepskyblue;
    }
    td{
        text-align: center;
    }

</style>
<body>
<div class="box">
    <h1>存储空间列表</h1>
    <button id = "cj" onclick="create()">创建存储空间</button>
    <table border="1" cellspacing="0">
        <thead>
        <tr>
            <th>存储空间名称</th>
            <th>存储类型</th>
            <th>容量</th>
            <th>流量</th>
            <th>当月访问次数</th>
            <th>访问权限管理</th>
        </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

</div>
</body>
</html>
<script>
    //查询数据
    $.ajax({
        url:'${pageContext.request.contextPath}/Oss.action',
        type : 'get',
        data :{opr:'list'},
        dataType:'json',
        success: showList,
        error:function () {
            alert('查询失败,请联系管理员!');
        }
    })

    function showList(data) {
        console.log(data);
        $('tbody').empty();
        data.forEach(dd => {

            let p = dd.permission;
            let rwCheck = '';
            let rCheck = '';
            let PriCheck = '';
            if(p=='RW'){
                rwCheck = 'checked';
            }if(p=='R'){
                rCheck = 'checked';
            }if(p=='Pri'){
                PriCheck = 'checked';
            }
            let tr = `<tr>
                <td>` + dd.bucketName + `</td>
                <td>` + dd.type + `</td>
                <td>` + dd.capacity + `</td>
                <td>` + dd.flow + `</td>
                <td>` + dd.visits + `</td>
                <td>
                    <input type="radio" name="permission-`+dd.id+`" value="RW" `+rwCheck+`  onclick="changeval(`+dd.id+`,'RW')">RW
                    <input type="radio" name="permission-`+dd.id+`" value="R"  `+rCheck+` onclick="changeval(`+dd.id+`,'R')">R
                    <input type="radio" name="permission-`+dd.id+`" value="Pri"  `+PriCheck+` onclick="changeval(`+dd.id+`,'Pri')">Pri
                </td>
            </tr>`
            $('tbody').append(tr);
        })
    }

    //点击创建按钮 跳转创建页面
    function create() {
        window.location.href = "addList.jsp";
    }
    function changeVal(id,permission) {
        let opr = "update";
        let params = {opr,id,permission}
        $.ajax({
            url: '${pageContext.request.contextPath}/Oss.action',
            type: 'post',
            data: params,
            dataType: 'json',
            success:function (data) {
                console.log(data);
                if (data==true){
                    alert('更新成功！')
                    location.reload();
                }else {
                    alert('更新失败！')
                    location.reload();
                }
            },
            error:function () {
                alert('修改失败！')
            }
        })
    }
</script>

